<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>main</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <script type="text/javascript" src="../lib/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="../lib/echarts/echarts.themez.js"></script>
    <link rel="stylesheet" href="../css/oksub.css" media="all"/>
</head>
<body class="console console1 ok-body-scroll">
<div class="ok-body home">
    <div class="layui-row layui-col-space15">
        <hr class="layui-bg-gray">
        <fieldset class="layui-elem-field">
            <legend>轮播</legend>
            <div class="layui-field-box">
                <div class="layui-carousel" id="mainCarousel" style="margin: 0 auto">
                    <div carousel-item style="text-align:center;" id="carouselList">
                    </div>
                </div>
            </div>
        </fieldset>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="ok-card-title">驾校资源统计</div>
                </div>
                <div class="ok-card-body map-body">
                    <div style="height: 100%;" id="schoolResources"></div>
                </div>
            </div>
        </div>

        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="ok-card-title">具体分析</div>
                </div>
                <div class="ok-card-body map-body">
                    <div style="height: 100%;" id="specificData"></div>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
</html>
<!--js逻辑-->
<script src="../lib/layui/layui.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../lib/echarts/echarts.min.js"></script>
<script src="../lib/echarts/echarts.themez.js"></script>
<script src="../js/application.js"></script>
<script type="text/javascript">
    var showNotice;
    layui.use(["layer", "carousel", "okUtils"], function () {
        let $ = layui.jquery;
        var carousel = layui.carousel;
        var okUtils = layui.okUtils;
        var noticeData;

        myAjax(mainUri + "/notice/selects", {limit: 4, isShow: 1, noticeType: 1}, function (d) {
            if (showNotice == null) {
                showNotice = function (noticeId) {
                    if (isNoEmpty(noticeData)) {
                        for (val of noticeData) {
                            if (val['noticeId'] == noticeId) {
                                var content = val['content'].replaceAll('src="http://localhost:8080', 'src="' + MainIP)
                                var width = document.body.clientWidth / 2
                                layer.open({
                                    type: 1,
                                    title: val['title'],
                                    area: [width.toString() + 'px', '500px'],
                                    content: content,
                                    shadeClose: true,
                                    maxmin: true
                                });
                            }
                        }
                    }
                }
            }
            var htmlTop = ' <div class="layui-bg-cyan">\n' +
                '<div onclick="showNotice(\'';
            var htmlContent = '\')"><img width="1525" height="400" src="'
            var htmlBottom = '"></div></div>'
            if (d["code"] == 0) {
                noticeData = d['data'];
                for (val of d['data']) {
                    var html = htmlTop + val['noticeId'] + htmlContent + MainIP + mainUri + val['noticeImg'] + htmlBottom;
                    $("#carouselList").append(html)
                }
            }
            //建造实例
            carousel.render({
                elem: '#mainCarousel'
                , width: '1525px' //设置容器宽度
                , height: '400px'
                , arrow: 'always' //始终显示箭头
                , autoplay: true
            });
        })

        var specificDataOptionByCoach=function(d){
            return {
                title: {show: false, text: '教练信息统计', x: 'center'},
                tooltip: {trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)"},
                legend: {orient: 'vertical', left: 'left', data: ['科目一', '科目二', '科目三', '科目四']},
                series: [
                    {
                        name: '教练信息统计', type: 'pie', radius: '55%', center: ['50%', '60%'],
                        data: [{value: d['stage1'], name: '科目一'}, {value: d['stage2'],name: '科目二'}, {value: d['stage3'], name: '科目三'}, {value: d['stage4'], name: '科目四'}],
                        itemStyle: {emphasis: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}}
                    }
                ]
            };
        }

        var specificDataOptionByStudent=function(d){
            return {
                title: {show: false, text: '学员信息统计', x: 'center'},
                tooltip: {trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)"},
                legend: {orient: 'vertical', left: 'left', data: ['科目一', '科目二', '科目三', '科目四']},
                series: [
                    {
                        name: '学员信息统计', type: 'pie', radius: '55%', center: ['50%', '60%'],
                        data: [{value: d['status1'], name: '科目一'}, {value: d['status2'],name: '科目二'}, {value: d['status3'], name: '科目三'}, {value: d['status4'], name: '科目四'}],
                        itemStyle: {emphasis: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}}
                    }
                ]
            };
        }

        var specificDataOptionByVehicle=function(d){
            return {
                title: {show: false, text: '车辆信息统计', x: 'center'},
                tooltip: {trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)"},
                legend: {orient: 'vertical', left: 'left', data: ['手动挡', '自动挡']},
                series: [
                    {
                        name: '教练信息统计', type: 'pie', radius: '55%', center: ['50%', '60%'],
                        data: [{value: d['type0'], name: '手动挡'}, {value: d['type1'],name: '自动挡'}],
                        itemStyle: {emphasis: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}}
                    }
                ]
            };
        }

        var initSpecificDataByCoach = function (specificDataOption) {
            var specificData = echarts.init(document.getElementById('specificData'));
            specificData.setOption(specificDataOption);
            okUtils.echartsResize([specificData]);
        }

        myAjax(mainUri + "/count/countAll", {}, function (d) {
            if (d['code'] == 0) {
                var schoolResources = echarts.init(document.getElementById('schoolResources'));
                var schoolResourcesOption = {
                    color: "#03a9f3",
                    xAxis: {type: 'category', data: ['学员', '教练', '车辆']},
                    yAxis: {type: 'value'},
                    series: [{
                        data: [d['data']['studentCount'] || 0, d['data']['coachCount'] || 0, d['data']['vehicleCount'] || 0],
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }],
                    tooltip: {
                        trigger: 'axis'
                    }
                };
                schoolResources.setOption(schoolResourcesOption);
                okUtils.echartsResize([schoolResources]);
                schoolResources.on('click', function (params) {
                    var name = params['name'];
                    var specificDataOption;
                    var uri=mainUri+"/count/"
                    if(name=="学员"){
                        uri+="countByStudent"
                        specificDataOption=specificDataOptionByStudent
                    }else if(name=="教练"){
                        uri+="countByCoach"
                        specificDataOption=specificDataOptionByCoach
                    }else if(name=="车辆"){
                        uri+="countByVehicle"
                        specificDataOption=specificDataOptionByVehicle
                    }
                    myAjax(uri,{},function (d) {
                        if(d['code']==0){
                            if(isNoEmpty(specificDataOption)){
                                initSpecificDataByCoach(specificDataOption(d['data']))
                            }
                        }
                    })


                })
            }
        })

    });

</script>